<template>
  <v-card>
    <v-card-title>
      <v-btn v-show="authorize.add" color="primary" @click="addCategory">新增顶级类目</v-btn>
    </v-card-title>
    <v-divider/>
    <v-flex xs12 sm10>
      <v-tree url="/item/category/list"
              :isEdit="isEdit"
              :authorize="authorize"
              @handleAdd="handleAdd"
              @handleEdit="handleEdit"
              @handleDelete="handleDelete"
              @handleClick="handleClick"
              ref="tree"
      />
    </v-flex>

    <!--弹出的对话框-->
    <v-dialog max-width="300" v-model="show" persistent scrollable>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>新增顶级类目</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="show=false"><v-icon>close</v-icon></v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5" style="height:250px">
          <v-flex>
            <v-text-field v-model="categoryName"  label="类目名称：" />
          </v-flex>
        </v-card-text>
        <v-card-actions>
          <v-spacer/>
          <v-btn color="blue darken-1" flat @click.native="show=false">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="save">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>
  export default {
    name: "category",
    data() {
      return {
        isEdit:true,
        show:false,
        categoryName:null,
        authorize:{add:false,edit:false,delete:false}
      }
    },
    created(){
      this.$http({
        method: 'GET',
        url: '/user/author/query/other/auth?url='+this.$route.path,
        headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
      }).then((resp) => {
        if(resp.data.code == 1){
          resp.data.data.forEach(m => {
            if(m.url == "/item/category/update" && m.method == "POST"){
              this.authorize.add=true;
            }
            if(m.url == "/item/category/update" && m.method == "PUT"){
              this.authorize.edit=true;
            }
            if(m.url == "/item/category/delete/*" && m.method == "DELETE"){
              this.authorize.delete=true;
            }
          })
        }else{
          this.$message.error(resp.data.message);
        }
      }).catch(() => {
        this.$message.error("服务器异常");
      });
    },
    methods: {
      addCategory(){
        this.show=true;
        this.categoryName=null;
      },
      save(){
        let child = {
          name: this.categoryName,
          parentId: 0,
          isParent: false,
          sort:this.$refs.tree.getDbSize()+1,
          type:0
        }
        this.$http({
          method: 'post',
          url: '/item/category/update',
          data: child,
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then( resp => {
          if(resp.data.code == 1){
            this.$message.success("保存成功！");
            this.$refs.tree.getData();
            this.show=false;
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      handleAdd(node) {
      },
      handleEdit(id, name) {
        this.$http({
          method: 'PUT',
          url: '/item/category/update',
          data: {id:id,name:name,type:1},
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then(resp => {
          if(resp.data.code == 1){
            this.$message.success("保存成功！");
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      handleDelete(id) {
        this.$http({
          method: 'delete',
          url: '/item/category/delete/'+id,
          headers: {"x-authorize-token":this.$storeGet("L_TOKEN")}
        }).then( resp => {
          if(resp.data.code == 1){
            this.$message.success("删除成功！");
          }else{
            this.$message.error(resp.data.message);
          }
        }).catch(() => {
          this.$message.error("服务器异常");
        });
      },
      handleClick(node) {
        //console.log(node)
      }
    }
  };
</script>

<style scoped>

</style>
